
<div id="content">
    <div class="post">
        <h2 class="title">Kelola CSR</h2>
        <div style="clear: both;">&nbsp;</div>
    </div>
    <div class="block-table">
        <div class="center">
            <span>Pilih Berdasarkan Plasa : </span>
            <select id="plasa_id_chooser" onchange="changeTable()">
                <option value="-99">Semua Plasa</option>
                <?php
                foreach ($plasas as $plasa => $data) {
                    echo "<option value=" . $data['plasa_id'] . ">" . $data['name'] . "</option>";
                }
                ?>
            </select>
        </div>
        <div id="table-container">
            <table id="table-id" style="width:100%">
                <thead>
                    <tr>
                        <th>Nama CSR</th>
                        <th>Kontak</th>
                        <th>Plasa</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($csrs as $csr => $data) {
                        ?>
                        <tr>
                            <td><?= $data['csr_name']; ?></td>
                            <td><?= $data['csr_contact']; ?></td>
                            <td><?= $data['plasa_name']; ?></td>
                            <td><a class="update-csr anchor-button" onclick="updateCSR('<?= $data['csr_id']; ?>')" csr_id="<?= $data['csr_id']; ?>">Ubah</a> 
                                | <a href="javascript:confirm_delete('<?= base_url(); ?>admin/csr/delete',<?= $data['csr_id']; ?>)">Hapus</a>
                                | <a class="hover-photo" onclick="hoverPhoto(event, <?= $data['csr_id']; ?>)" csr_id="<?= $data['csr_id']; ?>">Lihat Foto</a>
                            </td>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
            </table>
        </div>

        <button id="add-csr" class="button-add" onclick="addCSR()">Tambah CSR</button>
        <div class="clearboth"></div>
    </div>
</div>

<div class="dialog-container2">
    <div id="photo-container" class="dialog-photo" onclick="hideBox()">

    </div>
</div>

<div class="dialog-container">
    <div id="insert-dialog" class="dialog">
        <form action="<?= base_url(); ?>admin/csr/add" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend>Tambah CSR</legend>
                <div class="input-block"><label>Nama CSR</label><input class="input-right" type="text" name="name" id="name_add"></div>
                <div class="input-block"><label>Kontak</label><input class="input-right" type="text" name="contact" id="contact_add"></div>
                <div class="input-block"><label>Unggah Foto</label><input  class="input-right" type='file' name="image" id="image_add" /><br /></div>
                <div class="input-block"><label>Plasa</label>
                    <select class="input-right" id="plasa_id_add" name="plasa_id">
                        <?php
                        foreach ($plasas as $plasa => $data) {
                            echo "<option value=" . $data['plasa_id'] . ">" . $data['name'] . "</option>";
                        }
                        ?>
                    </select> 
                </div>

                <br>
                <div class="center submit-container">
                    <input type="submit" name="submit_add_csr" value="Simpan" />
                    <!--                <button id="submit-add">Simpan</button>-->
                    <button class="cancel" type="button" onclick="cancel()">Batal</button>
                </div>
            </fieldset>
        </form>
    </div>

    <div id="update-dialog" class="dialog">
        <form action="<?= base_url(); ?>admin/csr/update" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend>Ubah informasi untuk : <span id="name_title_update"></span></legend>
                <input class="input-block" type="hidden" name="csr_id" id="csr_id_update">
                <div class="photo-update"></div>
                <div class="input-block"><label>Nama CSR</label><input class="input-right" type="text" id="name_update" name="name"></div>
                <div class="input-block"><label>Kontak</label><input class="input-right" type="text" id="contact_update" name="contact"></div>
                <div class="input-block"><label>Unggah Foto</label><input  class="input-right" type='file' name="image" id="image_add" /><br /></div>
                <div class="input-block"><label>Plasa</label>
                    <select class="input-right" id="plasa_id_update" name="plasa_id">
                        <?php
                        foreach ($plasas as $plasa => $data) {
                            echo "<option value=" . $data['plasa_id'] . ">" . $data['name'] . "</option>";
                        }
                        ?>
                    </select> 
                </div>

                <div class="center submit-container">
                    <input type="submit" name="submit_update_csr" value="Simpan" />
                    <!--                <button id="submit-update">Simpan</button>-->
                    <button class="cancel" type="button" onclick="cancel()">Batal</button>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<script type="text/javascript">
    var base_url = "<?= base_url(); ?>";
    var base_img_url = "<?= base_url() . PATH_TO_CSR_PHOTO_SITE; ?>";
    var ext = '<?= CSR_EXTENSION; ?>';
    var default_photo = '<?= CSR_DEFAULT_PHOTO; ?>';
    
    $(function(){
        oTable = $('#table-id').dataTable({
            'aoColumns': [
                {'sWidth': '300px'},
                {'sWidth': '400px'},
                {'sWidth': '300px'},
                {'sWidth': '300px'}
            ]
        });
    });
    
    function hideBox(){
        $('#photo-container').hide();
    }
    function hoverPhoto(evt, csr_id){
        //alert("masuk hover foto");
        //$(".hover-photo").click(function(evt){
        //var csr_id = $(this).attr('csr_id');
        $('#photo-container').empty();
        $.ajax({url:base_img_url + csr_id + ext,
            type:'HEAD',
            error: function(){
                //alert("masuk error");
                $('#photo-container').append('<div class="photo-close">[Tutup Foto]</div><br><img src="'+base_img_url + default_photo + ext + '">');
            },
            success: function(){
                //alert("masuk success");
                $('#photo-container').append('<div class="photo-close">[Tutup Foto]</div><br><img src="'+base_img_url + csr_id + ext + '?<?= rand(); ?>">');
            }
        });
        //alert("1");
        $('#photo-container').parent().css({
            position: 'absolute',
            top: evt.pageY - 100,
            left: evt.pageX - 100
        }).toggle();
        //alert("2");
        $('#photo-container').show();
        //alert("3");
    }
	
    function changeTable(){
        //alert("kepanggil");
        var selected = $("#plasa_id_chooser").val();
        if(selected==-99){
            //alert("kepanggil2"); 
            //alert("kepanggil non -99"+selected);
            $.post(base_url + 'admin/csr/get_all_csr',
            null,
            function(json) {
                //alert(data);
                //$("#table-id").html(data);
                var data = JSON.parse(json);
                var added = "";
                added+= " <table id=\"table-id\" style=\"width:100%\">";
                added += "<thead>";
                added += "<tr>";
                added += "<th>Nama CSR</th>";
                added += "<th>Kontak</th>";
                added += "<th>Plasa</th>";
                added += "<th>Aksi</th>";
                added += "</tr>";
                added += "</thead>";
                added += "<tbody>";
                if(data.length>0){
                    for (var i = 0; i < data.length; i++){
                        added += "<tr>";
                        added += "<td>"+data[i]["csr_name"]+"</td>";
                        added += "<td>"+data[i]['csr_contact']+"</td>";
                        added += "<td>"+data[i]['plasa_name']+"</td>";
                        added += "<td><a class=\"update-csr anchor-button\" onclick=\"updateCSR('"+data[i]['csr_id']+"')\" csr_id='"+data[i]["csr_id"]+"'>Ubah</a>";
                        added += "| <a href=\"javascript:confirm_delete('"+base_url+"admin/csr/delete',"+data[i]['csr_id']+")\">Hapus</a>";
                        added += "| <a class=\"hover-photo\" onclick=\"hoverPhoto(event, '"+data[i]['csr_id']+"')\" csr_id="+data[i]['csr_id']+">Lihat Foto</a>";
                        added += "</td>";
                        added+="</tr>";
                    }
                }else{
                    added += "<tr>";
                    added += "<td>Tidak ada data</td><td></td><td></td><td></td>";
                    added += "</tr>";
                }
                added += "</tbody>";
                added += "</table>";
                $("#table-container").html("");
                $("#table-container").html(added);
                $('#table-id').dataTable({
                    'aoColumns': [
                        {'sWidth': '300px'},
                        {'sWidth': '400px'},
                        {'sWidth': '300px'},
                        {'sWidth': '300px'}
                    ]
                });
                //init_click();
            });
        }else{
            //alert("kepanggil non -99"+selected);
            $.post(base_url + 'admin/csr/get_csr_by_plasa',
            {plasa_id : selected},
            function(json) {
                //alert(data);
                //$("#table-id").html(data);
                var data = JSON.parse(json);
                var added = "";
                added+= " <table id=\"table-id\" style=\"width:100%\">";
                added += "<thead>";
                added += "<tr>";
                added += "<th>Nama CSR</th>";
                added += "<th>Kontak</th>";
                added += "<th>Plasa</th>";
                added += "<th>Aksi</th>";
                added += "</tr>";
                added += "</thead>";
                added += "<tbody>";
                if(data.length>0){
                    for (var i = 0; i < data.length; i++){
                        added += "<tr>";
                        added += "<td>"+data[i]["csr_name"]+"</td>";
                        added += "<td>"+data[i]['csr_contact']+"</td>";
                        added += "<td>"+data[i]['plasa_name']+"</td>";
                        added += "<td><a class=\"update-csr anchor-button\" onclick=\"updateCSR('"+data[i]['csr_id']+"')\"csr_id='"+data[i]["csr_id"]+"'>Ubah</a>";
                        added += "| <a href=\"javascript:confirm_delete('"+base_url+"admin/csr/delete',"+data[i]['csr_id']+")\">Hapus</a>";
                        added += "| <a class=\"hover-photo\" onclick=\"hoverPhoto(event, '"+data[i]['csr_id']+"')\" csr_id="+data[i]['csr_id']+">Lihat Foto</a>";
                        added += "</td>";
                        added+="</tr>";
                    }
                }else{
                    added += "<tr>";
                    added += "<td>Tidak ada data</td><td></td><td></td><td></td>";
                    added += "</tr>";
                }
                added += "</tbody>";
                added += "</table>";
                $("#table-container").html("");
                $("#table-container").html(added);
                $('#table-id').dataTable({
                    'aoColumns': [
                        {'sWidth': '300px'},
                        {'sWidth': '400px'},
                        {'sWidth': '300px'},
                        {'sWidth': '300px'}
                    ]
                });
                //init_click();
            });
        }
    }
    
    //function init_click(){
    //add
    function addCSR(){
        //$("#add-csr").click(function(){
        close_dialog(); 
        $('#insert-dialog').show();
    }
    //update
    function updateCSR(csr_id){
        //$(".update-csr").click(function(){
        close_dialog();
		
        //var csr_id = $(this).attr('csr_id');
			
        $.get(base_url + 'admin/csr/getcsr/' + csr_id,
        function(data) {
            $("#name_title_update").text(data.name);
            $("#csr_id_update").val(data.csr_id);
            $("#name_update").val(data.name);
            $("#contact_update").val(data.contact);
            $("#plasa_id_update").val(data.plasa_id);
        }, "JSON");
		
        //		var frame = $('.photo-update');
        //		$.ajax({url:base_img_url + csr_id + ext,
        //			type:'HEAD',
        //			error: function(){
        //				frame.append('<img src="'+base_img_url + "default" + ext + '">');
        //			},
        //			success: function(){
        //				frame.append('<img src="'+base_img_url + csr_id + ext + '">');
        //			}
        //		});
			   
        $('#update-dialog').show();
    }
    function submitUpdate(){
        //$("#submit-update").click(function(){	
        var postdata = {
            csr_id : $("#csr_id_update").val(),
            name : $("#name_update").val(),
            contact: $("#contact_update").val(),
            plasa_id: $("#plasa_id_update").val()
        };
			
        $.post(base_url + 'admin/csr/update', postdata, function(ret) {
            //alert(ret);
            window.location.reload();
        });
    }
	
    //cancel
    function cancel(){
        close_dialog();
    }
    //}

    //cancel
    function close_dialog(){
        $('#name_add').val("");
        $('#contact_add').val("");
        $('#plasa_id_add').val("");
        $('#name_title_update').val("");
        $('#name_update').val("");
        $('#contact_update').val("");
        $('#plasa_id_update').val("");
        
        $('.dialog').hide();
    }
    //delete
    function confirm_delete(url, csr_id) {
        if (confirm("Apakah Anda yakin ingin menghapus?")) {
            $.post(url, {csr_id: csr_id}, function(ret) {
                //alert(ret);
                window.location.reload();
            });
        }else{
            //document.location = '';
        }
    }
</script>
